﻿@using xConnected.Common.ExpertProfile
<div class="modal-wide hide fade" id="CategoriesProfileDialog" style="display: none;" >
    <div class="modal-header">
    </div>
    <div class="modal-body" >
        <div class="thumbnail" style="margin-bottom: 20px;">
            <div class="row-fluid" style="margin-left: 10px; margin-right: 10px; margin-bottom: 10px; margin-top: 10px">
                <div data-bind="visible: $root.profile.selectCatVisible" style="margin-bottom: 10px"><span><strong>@Resources.SelectCategory</strong></span></div>
                <div data-bind="visible: $root.profile.selectCatNotVisible, click: function(){$root.profile.selectCatVisible(true); $root.profile.selectCatNotVisible(false);}" style="margin-bottom: 10px"><a href="#"><strong>Select Category</strong></a></div>
                <div data-bind="visible: $root.profile.selectCatVisible">
                <div>
                    <ul class="breadcrumb" data-bind="foreach: $root.profile.breadCrumbCategories" style="margin-right: 20px">
                        <li><a href="#" data-bind="text: Description, click: function() { $root.profile.selectBreadCrumbCategory($data); }"></a><span class="divider"><i class="icon-arrow-right"></i></span></li>
                    </ul>
                </div>
                <div>
                    <ul data-bind="foreach: $root.profile.availableCategories" class="unstyled">
                        <li class="row-fluid" style="margin-bottom: 5px">
                            <button class="btn btn-small" data-bind="click: function() { $root.profile.addCategory($data); }"><span data-bind="text: Description"></span> <i class="icon-share-alt" data-bind="css: { 'icon-plus': $data.IsLeaf }"></i></button>
                        </li>
                    </ul>
                </div>
                </div>
            </div>
        </div>
        <div class="thumbnail" style="margin-bottom: 20px;">
            <div style="margin-left: 10px; margin-right: 10px; margin-bottom: 10px; margin-top: 10px">
                <div style="margin-bottom: 10px"><span><strong>@Resources.AddCategorySkills</strong></span></div>
                <div class="row-fluid">
                    <span class="span3">@Resources.Category</span>
                    <span class="span3" style="margin-left: 5px">@Resources.Level</span>
                    <span class="span3" style="margin-left: 5px">@Resources.Experience</span>
                </div>
                <div data-bind="with: workingCategorySkill" class="row-fluid">
                    <input class="span3" type="text" readonly="readonly" data-bind = "value: CategoryName"/>
                    <select class="span3" data-bind="options: $root.profile.levels, optionsText: 'Description',optionsValue: 'Value', value: Level"></select>
                    <select class="span3" data-bind="options: $root.profile.experiences, optionsText: 'Description',optionsValue: 'Value', value: Experience"></select>
                    <button style="margin-bottom: 10px; margin-left: 5px" class="btn btn-small" data-bind="click: function() { $root.profile.addCategorySkill(); }"><i class="icon-plus"></i></button>
                </div>
            </div>
        </div>
        <div class="thumbnail" data-bind="with: workingProfileBuffer">
            <div class="row-fluid" style="margin-left: 10px; margin-right: 10px; margin-bottom: 10px; margin-top: 10px">
                <span><strong>@Resources.SelectedCategorySkills:</strong></span>
                <div style="padding-top: 10px">
                    <ul class="thumbnails" data-bind="foreach: CategorySkills">
                        <li class="span4">
                            <div class="thumbnail" style="height: 100px">
                                <div class="row-fluid">
                                    <span  style="font-size: smaller; font-weight: bold">@Resources.Category: </span><span data-bind=" text: CategoryName" style="font-size: smaller"></span>
                                    <button class="btn btn-mini pull-right" data-bind="click: function() { $root.profile.editCategorySkill($data); }"><i class="icon-pencil"></i></button>
                                </div>
                                <div class="row-fluid">
                                    <span  style="font-size: smaller; font-weight: bold">@Resources.Level: </span><span data-bind=" text: LevelText" style="font-size: smaller"></span>
                                    <button class="btn btn-mini pull-right" data-bind="click: function() { $root.profile.removeCategorySkill($data); }"><i class="icon-trash"></i></button>
                                </div>
                                <div class="row-fluid">
                                    <span  style="font-size: smaller; font-weight: bold">@Resources.Experience: </span><span data-bind=" text: ExperienceText" style="font-size: smaller"></span>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn btn-small btn-info" data-bind="click: function() { $root.profile.okCategories();}"><strong>@Resources.Ok</strong></a>
        <a href="#" class="btn btn-small" data-bind="click: function() { $root.profile.cancelCategories();}"><strong>@Resources.Cancel</strong></a>
    </div>
</div>